<template>
	<view class="item" @click.prevent="toExhibition">
		<view class="img-box">
			<image class="img" :src="itemData.thumb" mode=""></image>
			<view class="type" v-if="itemData.time_status == 1">
				即将展出
			</view>
			<view class="type" v-if="itemData.time_status == 2">
				正在展出
			</view>
			<view class="type" v-if="itemData.time_status == 3">
				已经结束
			</view>
		</view>
		<view class="content">
			<view class="title">
				{{itemData.name}}
			</view>
			<view class="text flex-between">
				<view class="time">
					{{itemData.start_time + "至" + itemData.end_time}}
				</view>
				<view class="text-right">
					<view class="collect flex-between">
						<image class="img" src="../static/collect.png" mode=""></image>
						<view class="">
							{{itemData.collects}}
						</view>
					</view>
					<view class="location flex-between">
						<image class="img" src="../static/location.png" mode=""></image>
						<view class="">
							{{itemData.city}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			itemData: {
				type: Object,
				default: {},
			}
		},
		data(){
			return {
				
			}
		},
		methods: {
			toExhibition(){
				uni.navigateTo({
					url: "/pages/index/exhibitionDetails?id=" + this.itemData.id,
				})
			},
			collect(type){
				if(type){
					cancelCollectShow(this.id).then(res=>{
						console.log(res)
						if(res.message == "收藏成功"){
							this.exhibitionData.is_collect = false;
							this.collects -= 1;
							this.$forceUpdate();
						}
					})
				}else{
					collectShow(this.id).then(res=>{
						console.log(res)
						if(res.message == "收藏成功"){
							this.exhibitionData.is_collect = true;
							this.collects += 1;
							this.$forceUpdate();
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.item{
		width: 690rpx;
		margin: 0 auto 30rpx;
		background: #fff;
		.img-box{
			position: relative;
			width: 100%;
			height: 340rpx;
			.img{
				display: block;
				width: 100%;
				height: 100%;
			}
			.type{
				position: absolute;
				top: 20rpx;
				right: 0;
				width: 124rpx;
				height: 50rpx;
				border-radius: 25rpx 0 0 25rpx;
				background: rgba(153, 153, 153, 0.5);
				color: #fff;
				font-size: 24rpx;
				line-height: 50rpx;
				text-align: center;
			}
		}
		.content{
			padding: 30rpx;
			.title{
				font-size: 28rpx;
				line-height: 28rpx;
				margin-bottom: 16rpx;
				color: #333;
				font-weight: 700;
			}
			.text{
				font-size: 24rpx;
				line-height: 34rpx;
				color: #666;
				.text-right{
					display: flex;
				}
				.collect{
					margin-right: 40rpx;
					.img{
						width: 34rpx;
						height: 34rpx;
						margin-right: 20rpx;
					}
				}
				.location{
					.img{
						width: 28rpx;
						height: 34rpx;
						margin-right: 20rpx;
					}
				}
			}
		}
	}
</style>
